<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ page isELIgnored="true" %>
<!-- 在线留言 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>考试记录</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<style>

    .test {
        position: relative;
        top: 0;
        margin-left: 200px;
        padding-bottom: 10px;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__container {
        height: 450px;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    img {
        /*设置图片宽度和浏览器宽度一致*/
        width: 100%;
        height: inherit;
    }

    .mainContainer {
        width: 90%;
        margin: 0 auto;
    }

    .margin10px {
        margin-left: 10px;
        margin-right: 10px;
    }

    .flex_space_between {
        display: flex;
        justify-content: space-between;
    }

    .well {
        min-height: 20px;
        padding: 19px;
        /*margin-bottom: 20px;*/
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
    }

    .align_center {
        align-items: center;
    }

    .myTitle {
        font-size: 20px;
        font-weight: bold;
        color: #475669;
    }

    .table_container {
        margin-top: 20px;
    }

    .flex_center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .paginationDiv {
        margin-top: 40px;

    }

</style>
<body>
<div class="test" id="examPaperList">
    <!-- 轮播图 start -->
    <div>
        <el-carousel indicator-position="outside">
            <el-carousel-item v-for="(item, index) in imgList" :key="index">
                <img :src="item.url" class="image">
            </el-carousel-item>
        </el-carousel>
    </div>
    <!-- 轮播图 end -->
    <div class="mainContainer well">
        <!-- 头部 start -->
        <div class="flex_space_between align_center">
            <div class="myTitle">考试记录</div>
        </div>
        <!-- 头部 end -->
        <!-- 列表 start -->
        <div class="table_container">
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="paperName"
                        label="试卷名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="numberOfQuestions"
                        align="center"
                        label="题量">
                </el-table-column>
                <el-table-column
                        prop="numberOfCorrectAnswers"
                        label="答对数量"
                        align="center"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="score"
                        label="得分"
                        align="center"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="examTime"
                        align="center"
                        label="考试时间">
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="entranceExamRecordDetail(scope.row)">
                            查看详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 列表 end -->
        <!-- 分页 start -->
        <div class="flex_center paginationDiv">
            <div>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageIndex"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 分页 end -->
    </div>

</div>
<div style="height: 20px"></div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const examPaperList = new Vue({
        el: '#examPaperList',
        data() {
            return {
                // 轮播图
                imgList: [],
                tableData: [],
                // 分页信息
                // 当前页
                pageIndex: 1,
                // 每页显示条数
                pageSize: 10,
                // 总条数
                total: 400,
                // 总页数
                totalPage: 0,
                // 确认覆盖
                confirmCover: false,
            }
        },
        methods: {
            onSubmit: function () {
                console.log('submit!');
            },
            handleSizeChange: function (val) {
                console.debug('每页显示条数: ' + val);
                this.pageSize = val;
                this.getExamRecord();
            },
            handleCurrentChange: function (val) {
                console.debug('当前页: ' + val);
                this.pageIndex = val;
                this.getExamRecord();
            },
            /**
             * 获取考试记录
             */
            getExamRecord: function () {
                const _this = this;
                // 清空数据
                this.tableData = []
                // 请求数据
                axios({
                    url: '/jspmk28g8/examination/pageExamRecord',
                    method: 'get',
                    params: {
                        pageIndex: _this.pageIndex,
                        pageSize: _this.pageSize,
                        userId: window.localStorage.getItem('userid'),
                    },
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8',
                        'token': localStorage.getItem('Token'),
                    }
                }).then(res => {
                    const {code, data} = res.data;
                    if (code === 200) {
                        _this.tableData = data.records;
                        _this.total = data.total;
                        _this.totalPage = data.pages;
                    }
                }).catch(err => {
                    console.error(err);
                })

            },
            entranceExamRecordDetail: function (row) {
                console.debug(row);
                window.location.href = './detail.jsp?recordId=' + row.recordId;
            }
        },
        mounted() {
            const _this = this;
            // 加载轮播图数据
            axios({
                url: '/jspmk28g8/config/list',
                method: 'get',
            }).then(function (res) {
                console.debug(res);
                const {code, data} = res.data;
                if (code === 0) {
                    _this.imgList = [];
                    if (data.list) {
                        data.list.forEach(function (item) {
                            _this.imgList.push({
                                id: item.id,
                                url: '/jspmk28g8/' + item.value
                            });
                        });
                    }

                }
            }).catch(function (err) {
                console.error(err);
            })
            // 加载考试记录
            this.getExamRecord()
        }
    });
</script>
</body>
</html>